<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>一分钱的故事</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <!-- Add your keywords and description here for SEO. -->
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" type="image/png" href="images/favicon.png"/>

    <!-- Uncomment this if you need apple touch icon. -->
    <!--
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
    -->

    <!-- Don't delete this. It's needed for development workflow. -->
    <link rel="stylesheet" href="stylesheets/bundle.min.css">
</head>

<body>
<div class="loading-overlay">
    <img src="images/loding.gif">
</div>
<div class="no-auto-play" id="no-auto-play">
    <img src="images/start.png" class="play-btn" id="play-btn">
</div>
<div class="swiper-container" style="visibility: hidden;">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide-0">
            <!-- <div class="item-image animated" data-ani-name="slideInLeft" data-ani-duration="1s" data-ani-delay="0s"></div> -->
            <img src="images/link.gif" style="visibility: hidden;">
            <button class="up-arrow animated" data-ani-name="fadeIn" data-ani-delay="3s">
                <i class="icon-angle-double-up"></i>
            </button>
            <!-- <p class="item-text animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p> -->
        </div>
        <div class="swiper-slide slide-1">
            <!-- <div class="item-image animated" data-ani-name="slideInLeft" data-ani-duration="1s" data-ani-delay="0s"></div> -->
            <img src="images/1.jpg" style="visibility: hidden;">
            <!-- <p class="item-text animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p> -->
        </div>
        <div class="swiper-slide slide-2">
            <!-- <div class="item-image animated" data-ani-name="bounceInDown" data-ani-duration="1s" data-ani-delay="0s"></div> -->
            <img src="images/2.jpg" style="visibility: hidden;">
            <!-- <p class="item-text animated" data-ani-name="bounceInUp" data-ani-duration="1s" data-ani-delay="0.3s">I'm a frontend developer!</p> -->
        </div>
        <div class="swiper-slide slide-3">
            <!-- <div class="item-image animated" data-ani-name="flipInX" data-ani-duration="1s" data-ani-delay="0s"></div> -->
            <img src="images/3.jpg" style="visibility: hidden;">
            <!-- <p class="item-text animated" data-ani-name="flipInY" data-ani-duration="1s" data-ani-delay="0.3s">I'm a javascript newbie!</p> -->
        </div>
        <div class="swiper-slide slide-5">
            <!-- <div class="item-image animated" data-ani-name="flipInX" data-ani-duration="1s" data-ani-delay="0s"></div> -->
            <img src="images/a.gif" style="visibility: hidden;">
            <!-- <p class="item-text animated" data-ani-name="flipInY" data-ani-duration="1s" data-ani-delay="0.3s">I'm a javascript newbie!</p> -->
        </div>
        <div class="swiper-slide slide-4">
            <!-- <div class="item-image animated" data-ani-name="flipInX" data-ani-duration="1s" data-ani-delay="0s"></div> -->
            <!-- <p class="item-text animated" data-ani-name="flipInY" data-ani-duration="1s" data-ani-delay="0.3s">I'm a javascript newbie!</p> -->
            <div class="item-proj animated" data-ani-name="zoomIn" data-ani-duration="1s" data-ani-delay="0s">
                <div class="inner">
                    <img src="images/WechatIMG25.jpeg">
                    <div class="desc-area">
                        <p class="title">抗战老兵关怀计划</p>
                        <p class="desc">深圳市龙越慈善基金会是专注于服务抗战老兵的公益机构，项目包括...</p>
                        <div class="friend"><img src="images/WechatIMG14.jpeg"><img src="images/WechatIMG15.jpeg"><img src="images/WechatIMG16.jpeg"><span>等100位好友已支持</span></div>
                    </div>
                </div>
                <div class="btn-area">
                    <a class="btn">捐出我的0.01</a>
                </div>
            </div>
            <div class="item-proj animated" data-ani-name="zoomIn" data-ani-duration="1s" data-ani-delay="1s">
                <div class="inner">
                    <img src="images/WechatIMG26.jpeg">
                    <div class="desc-area">
                        <p class="title">感恩留守老母亲</p>
                        <p class="desc">我们是江苏省老龄事业发展基金会，5月14日母亲节，为农村留守老母...</p>
                        <div class="friend"><img src="images/WechatIMG17.jpeg"><img src="images/WechatIMG18.jpeg"><img src="images/WechatIMG19.jpeg"><span>等100位好友已支持</span></div>
                    </div>
                </div>
                <div class="btn-area">
                    <a class="btn">捐出我的0.01</a>
                </div>
            </div>
            <div class="item-proj animated" data-ani-name="zoomIn" data-ani-duration="1s" data-ani-delay="2s">
                <div class="inner">
                    <img src="images/WechatIMG27.jpeg">
                    <div class="desc-area">
                        <p class="title">关怀深山独居老人</p>
                        <p class="desc">为大山里的留守老人，提供生活用品采购、钟点工式陪伴、农业扶助...</p>
                        <div class="friend"><img src="images/WechatIMG20.jpeg"><img src="images/WechatIMG16.jpeg"><img src="images/WechatIMG17.jpeg"><span>等100位好友已支持</span></div>
                    </div>
                </div>
                <div class="btn-area">
                    <a class="btn">捐出我的0.01</a>
                </div>
            </div>
        </div>
    </div>
    <button class="up-arrow">
        <i class="icon-angle-double-up"></i>
    </button>
</div>



<!-- <button class="btn-music">
    <i class="icon-note"></i>
</button> -->
<video src="audios/movietest.mp4" class="video" id="video" webkit-playsinline="" playsinline="" x5-video-player-type="h5" x5-video-player-fullscreen="" reload="auto" preload="auto" >
    <source src="audios/movietest.mp4" type="video/mp4">
</video>
<span class="go-on-btn" id="go-on-btn" style="display: none;"><img src="images/send.png"></span>
<span class="go-on-btn" id="go-on-btn2" style="display: none;"><img src="images/view.png"></span>
<!-- <audio loop>
    <source src="audios/background.mp3" type="audio/mpeg">
</audio>
 -->
<!-- Don't delete this. It's needed for development workflow. -->
<script src="javascripts/bundle.min.js"></script>

</body>

</html>
